<!--
 * @Author: PoJun
 * @Date: 2024-06-25 11:24:25
 * @LastEditors: PoJun
 * @LastEditTime: 2024-07-09 11:29:34
 * @Message: Nothing
-->
<template>
  <view class="swiper" :style="[vuex_theme]">
    <uv-navbar
      title=" "
      @leftClick="customNavbarBack"
      bgColor="transparent"
      titleWidth="auto"
    ></uv-navbar>
    <!-- 如果存在性能问题 , 看看是否后续轮播图换个方式实现,  -->
    <uv-swiper
      v-if="showSwiper"
      :list="vuex_image_list"
      keyName="url"
      :autoplay="false"
      :current="currentIndex"
      :circular="true"
      :radius="0"
      @change="e => (currentIndex = e.current)"
      height="100vh"
    >
      <template v-slot:indicator>
        <view class="swiper-indicator">{{ currentIndex + 1 }}/{{ vuex_image_list.length }}</view>
      </template>
    </uv-swiper>

    <!-- 放个日期时间? -->
    <view class="swiper-mask">
      <view class="swiper-mask-time">{{ getCurrentDateTime("time") }}</view>
      <view class="swiper-mask-date">
        {{ getCurrentDateTime("date") }} {{ getCurrentDateTime("day") }}
      </view>
    </view>

    <uv-back-top
      :scroll-top="0"
      :top="-1"
      icon="download"
      :customStyle="{ backgroundColor: vuex_theme['--theme-primary-color'] }"
      :iconStyle="{ color: '#fff', fontSize: '24px' }"
      @click="downloadThis"
    ></uv-back-top>
  </view>
</template>

<script>
import commonFuncMixin from "@/utils/commonFuncMixin.js"
export default {
  mixins: [commonFuncMixin],
  data() {
    return {
      currentIndex: 0,
      showSwiper: false
    }
  },
  methods: {
    /**
     * 下载当前图片
     */
    downloadThis() {
      const image = this.vuex_image_list[this.currentIndex]
      // 怎么下 ?
      console.log(image)

      uni.downloadFile({
        url: image.url, //仅为示例，并非真实的资源
        success: res => {
          if (res.statusCode === 200) {
            uni.$uv.toast("下载成功!")
          }
        }
      })
    },
    /**
     * 获取星期几
     */
    getWeekDay(weekDay) {
      let weekDayStr = ""
      switch (weekDay) {
        case 0:
          weekDayStr = "星期日"
          break
        case 1:
          weekDayStr = "星期一"
          break
        case 2:
          weekDayStr = "星期二"
          break
        case 3:
          weekDayStr = "星期三"
          break
        case 4:
          weekDayStr = "星期四"
          break
        case 5:
          weekDayStr = "星期五"
          break
        case 6:
          weekDayStr = "星期六"
          break
      }
      return weekDayStr
    }
  },
  computed: {
    getCurrentDateTime() {
      return type => {
        const now = new Date()
        if (type === "time") {
          return uni.$uv.date(now, "hh:MM")
        } else if (type === "date") {
          return uni.$uv.date(now, "yyyy-mm-dd")
        } else if (type === "day") {
          return this.getWeekDay(now.getDay())
        }
      }
    }
  },
  onLoad(e) {
    this.currentIndex = +e.index
    this.showSwiper = true
    console.log(this.vuex_image_list)
  }
}
</script>

<style lang="scss" scoped>
.swiper {
  .swiper-indicator {
    color: #fff;
    pointer-events: none;
  }
  &-mask {
    position: fixed;
    top: 200px;
    left: 0;
    right: 0;
    margin: 0 auto;
    text-align: center;
    color: #fff;
    pointer-events: none;
    &-time {
      font-size: 45px;
    }
    &-date {
      font-size: 16px;
    }
  }
}
</style>
